<template>
	<div class="container">
		<div class="search-wrapper">
			<div class="search-header">
				<div class="input-wrapper">
					<img src="../assets/search.png" class="search-icon"/>
					<input type="text"
						   autofocus="autofocus" 
						   placeholder="搜电影、搜影院" 
						   class="search-input" 
						   v-model.trim="kw"
						   v-on:change="searchMovie"/>
					<img src="../assets/del.png" class="del-input" @click="emptySearch"/>
				</div>
				<div class="cancel" @click="toBack">取消</div>
			</div>
			<div class="search-history" v-show="movies.list.length == 0 && cinemas.list.length == 0 && kw == ''">
				<div class="history-item" 
					 v-for="(item,index) in searchRecord"
					 :key="index"
					 @click="checkSearch($event)">
					<span class="history-icon"></span>
					<span class="word">{{item}}</span>
					<div class="del-word"
						 @click="deleteSearch(index)"></div>
				</div>
			</div>
			<div class="search-result" v-show="movies.list.length != 0 || cinemas.list.length != 0">
				<div class="result-wrapper">
					<div class="result" v-if="movies.list.length != 0">
						<h3>电影/电视剧/综艺</h3>
						<div class="list">
							<div class="movie clearfix" v-for="(item,index) in movies.list" :key="index">
								<img class="poster fl" :src="_repic(item.img)"/>
								<div class="info">
									<div class="name-score">
										<p class="name">
											<span class="one-line">{{item.nm}}</span>
											<span class="version v3d" v-if="item.version"></span>
										</p>
										<span class="score" v-if="item.sc">
											<span class="num">{{item.sc}}</span>分
										</span>
										<span class="score" v-if="!item.sc">
											<span class="none">暂无评分</span>
										</span>
									</div>
									<div class="detail-section">
										<div class="detail-item">
											<p class="ename one-line">{{item.enm}}</p>
											<p class="catogary">{{item.cat}}</p>
											<p class="release">{{item.rt}}</p>
										</div>
										<!-- <div class="want-wrapper">
											<span class="want">想看</span>
										</div> -->
									</div>
								</div>
							</div>
						</div>
						<div class="more-result" v-if="movies.total > 3">查看全部{{movies.total}}部影视剧</div>
					</div>
					<div class="result" v-if="cinemas.list.length != 0">
						<h3>影院</h3>
						<div class="list">
							<div class="cinema-wrapper"
								 v-for="(item,index) in cinemas.list"
								 :key="index">
								<div class="title">
									<span>{{item.nm}}</span>
									<span class="price-block">
										<span class="price">{{item.sellPrice}}</span>
										<span class="q"> 元起</span>
									</span>
								</div>
								<div class="location-block">
									<div class="location">{{item.addr}}</div>
									<div class="distance">{{item.distance}}</div>
								</div>
								<div class="label-block">
									<div class="allowRefund blue-style">退</div>
									<div class="endorse blue-style">改签</div>
									<div class="snack yellow-style">小吃</div>
									<div class="vipTag yellow-style">折扣卡</div>
									<div class="hallType blue-style">杜比全景声厅</div>
								</div>
								<div class="discount-block">
									<div class="discount-label">
										<img src="" alt="">
									</div>
									<div class="discount-label-text">222</div>
								</div>
								<div class="min-show-block" v-if="item.showTimes">
									<span>近期场次：</span>
									<span class="item">{{item.showTimes}}</span>
								</div>
							</div>
							<div class="more-result" v-if="cinemas.total > 10">查看全部{{cinemas.total}}家电影院</div>
						</div>
					</div>
				</div>
			</div>
			<div class="search-none" v-show="result">没有找到相关内容</div>
		</div>
	</div>
</template>


<script>
import api from '../config/api.js';

export default {
	data(){
		return {
			kw: '',
			result: false,
			searchRecord: [],	// 搜索记录
			movies: {
				list: [],
				total: 0
			},
			cinemas: {
				list: [],
				total: 0
			}
		}
	},
	methods: {
		_repic(img){
			return img.replace(/w.h/,'64.90');
		},
		toBack(){
			this.$router.go(-1)
		},
		reSearchRecord(){
			let arr = this.searchRecord
			if(arr.length > 3){
				arr.pop()
			}
		},
		searchMovie(){
			if(this.kw == ''){
				this.movies.list = [];
				this.cinemas.list = [];
				return
			}
			
			this.$axios({
				method: 'get',	
				url: api.search,
				params: {
					kw: this.kw,
					cityId: 20,
					stype: -1
				}
			}).then((res) => {
				console.log('res',res)
				
				// 提示搜索结果是否又内容
				if(!res.data.hasOwnProperty('movies') && !res.data.hasOwnProperty('cinemas')){
					this.result = true;
				}else{
					this.result = false;
				}
				
				// 判断movies是否有值
				if(res.data.hasOwnProperty('movies')){
					this.movies = res.data.movies;
				}else{
					this.movies.list = []; 
				}
				
				// 判断cinemas是否有值
				if(res.data.hasOwnProperty('cinemas')){
					this.cinemas = res.data.cinemas;
				}else{
					this.cinemas.list = [];
				}
				
				// 搜索记录
				this.searchRecord.unshift(this.kw);
				this.reSearchRecord();
			})
		},
		checkSearch(event){
			console.log(event)
			this.kw = event.target.innerText;
			
			this.searchMovie();
		},
		// 删除搜索记录
		deleteSearch(index){
			this.searchRecord.splice(index,1)
		},
		// 清空搜索框
		emptySearch(){
			this.kw = '';
		}
	}
}
</script>

<style lang="scss" scoped>
.search-wrapper{
	height: 100vh;
	background-color: #f5f5f5;
}
.search-header{
	display: flex;
	align-items: center;
	padding: 8px 0 8px 10px;
	border-bottom: 1px solid #e5e5e5;
}
.input-wrapper{
	padding: 0 10px;
	border: 1px solid #e6e6e6;
	border-radius: 5px;
	background-color: #fff;
	flex-grow: 1;
}
.search-icon{
	display: block;
	width: 15px;
	height: 15px;
	margin-top: 6px;
	margin-right: 6px;
	float: left;
}
.search-input{
	width: calc(100% - 40px);
	line-height: 20px;
	padding: 4px 0;
	font-size: 13px;
	color: #333;
	border: none;
}
.del-input{
	width: 15px;
	height: 15px;
	float: right;
	margin-top: 6px;
}
.cancel{
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	font-size: 16px;
	color: #f03d37;
}

.search-none{
	width: 100%;
	height: 44px;
	font-size: 14px;
	color: #999;
	line-height: 44px;
	text-align: center;
	background: #fff;
}

/*搜索历史*/
.search-history{
	background-color: #fff;
}
.history-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 15px;
	line-height: 44px;
	border-bottom: 1px solid #e5e5e5;
}
.history-item:last-child{
	border-bottom: none;
}
.history-icon{
	width: 15px;
	height: 15px;
	margin-right: 10px;
	background: url(../assets/history-icon.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.word{
	font-size: 15px;
	color: #333;
	flex-grow: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.del-word{
	padding: 17px 15px;
	background: url(../assets/del-history.png);
	background-position: center;
	background-size: 10px;
	background-repeat: no-repeat;
}
.result-wrapper{
	height: 100%;
	overflow: auto;
}
.result{
	margin-bottom: 10px;
	background-color: #fff;
}
.result>h3{
	font-size: 15px;
	color: #999999;
	font-weight: 400;
	padding: 9px 15px;
}
.list{
	padding-left: 15px;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
}
.movie{
	padding: 12px 0;
	border-bottom: 1px solid #e6e6e6;
}
.movie:last-child{
	border-bottom: none;
}
.poster{
	width: 64px;
	height: 90px;
	margin-right: 10px;
	background-color: #eee;
}
.info{
	margin-right: 15px;
}
.name-score{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.name{
	display: flex;
	flex-grow: 1;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.name .one-line{
	display: inline-block;
	font-size: 17px;
	font-weight: 700;
	color: #222;
}
.name .version{
	display: block;
	height: 14px;
	margin-left: 5px;
}
.name .v3d{
	width: 17px;
	background: url(../assets/v3d.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.score{
	font-size: 10px;
	color: #fa0;
	padding-left: 5px;
	flex-shrink: 0;
}
.num{
	font-size: 16px;
}
.none{
	font-size: 14px;
	color: #666;
}
.detail-section{
	position: relative;
}
.detail-item{
	font-size: 13px;
	color: #666;
	margin-right: 48px;
	padding-right: 10px;
}
.detail-item>p{
	margin-top: 2px;
}
.ename{
}
.want-wrapper{
	width: 48px;
	height: 27px;
	font-size: 12px;
	color: #fff;
	background-color: #faaf00;
	border-radius: 4px;
	position: absolute;
	top: 15px;
	right: 0;
}
.want{
	display: block;
	text-align: center;
	line-height: 27px;
}
.more-result{
	font-size: 15px;
	color: #ef4238;
	text-align: center;
	line-height: 44px;
}
.cinema-wrapper:last-child{
	margin-bottom: 48px;
}
.cinema-wrapper{
	margin-left: 15px;
	padding: 13px 15px 13px 0;
	border-bottom: 1px solid #e1e1e1;
	.title{
		height: 23px;
		line-height: 23px;
		font-size: 16px;
		color: #000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		.price-block{
			color: #f03d37;
			line-height: 1.5;
			margin-left: 5px;
			.price{
				font-size: 18px;
			}
			.q{
				font-size: 12px;
			}
		}
	}
	.location-block{
		display: flex;
		margin-top: 6px;
		font-size: 13px;
		color: #666;
		.location{
			flex-grow: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.distance{
			margin-left: 5px;
		}
	}
	.label-block{
		margin: 4px 0;
		color: #777777;
		>div{
			display: inline-block;
			height: 17px;
			line-height: 15px;
			font-size: 12px;
			padding: 0 3px;
			margin-left: 5px;
		}
		.blue-style{
			color: #589daf;
			border: 1px solid #589daf;
			border-radius: 2px;
		}
		.yellow-style{
			color: #f90;
			border: 1px solid #f90;
			border-radius: 2px;
		}
		.allowRefund{
			margin-left: 0;
		}
	}
	.discount-block{
		display: flex;
		align-items: center;
		margin-bottom: 4px;
		.discount-label{
			display: inline-block;
			width: 15px;
			height: 14px;
			img{
				display: block;
				width: 100%;
			}
		}
		.discount-label-text{
			display: inline-block;
			font-size: 12px;
			line-height: 1.5;
			color: #999;
			margin-left: 5px;
		}
	}
	.min-show-block{
		font-size: 12px;
		color: #777777;
		line-height: 18px;
		.item{
			position: relative;
			margin-right: 14px;
		}
		.item:before{
			content: '';
			display: inline-block;
			width: 1px;
			height: 15px;
			background-color: #e1e1e1;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: -7px;
		}
		span:nth-child(2):before{
			content: '';
			display: none;
		}
	}
}
</style>
